<template>
  <article class="authorization_config">
    <div class="steps">
      <div v-for="(item, i) in stepTitle" class="step_line" :class="{ success: active >= i }">
        <span class="step_line_icon">
          <img v-if="active > i" src="/src/assets/image/success.svg" />
          <i v-else>{{ i + 1 }}</i>
        </span>
        <span>
          {{ item }}
        </span>
      </div>
    </div>
    <div class="authorization_config_detail">
      <div v-for="(item, i) in configMessage[active]" :key="i" class="detail_card">
        <div class="detail_title">
          <span><i></i> {{ item.title }}</span>
        </div>
        <div class="detail_desc">
          <p v-for="(descItem, i) in item.desc" :key="i"> {{ descItem.text }} <CopyText :copyData="descItem.copy_text" /> </p>
        </div>
        <div class="detail_content">
          <div v-if="item.content.length">
            <img v-for="(imgItem, i) in item.content" :key="i" :src="imgItem" />
          </div>
          <span v-else>这里是内容</span>
        </div>
      </div>
    </div>
    <el-dialog custom-class="enterprise_modal" v-model="configSuccessVisible" width="520px" title="提示" draggable>
      <div class="config_content">
        <img src="/static/appmarket/rectangle.png" style="width: 36px; height: 36px; margin-right: 32px" />
        <div>
          <h4>恭喜！客易达SCRM基础配置已完成！</h4>
          <!-- <p>是否需要开始配置企微通讯录？</p> -->
        </div>
      </div>
      <template #footer>
        <!-- <el-button plain @click="toHome">暂不配置，直接体验</el-button> -->
        <el-button type="primary" @click="toAuthConfig">开始体验</el-button>
      </template>
    </el-dialog>
    <div class="footer_buttons">
      <el-button v-show="active" @click="handleChangePage('last')">上一页</el-button>
      <el-button v-show="active < 2" type="primary" @click="handleChangePage('next')">已配置,下一页</el-button>
      <el-button v-show="active >= 2" type="primary" @click="configSuccessVisible = true">已完成配置</el-button>
    </div>
  </article>
</template>

<script lang="ts" setup>
  import { reactive, ref, onBeforeMount } from 'vue'
  import CopyText from '@/components/CopyText.vue'
  import { getCustomizedtAppQrcode } from '@/api/appmarket'
  import router from '@/router'
  import { mock } from './mock.js'

  // 授权配置内容
  const configMessage = reactive(mock)

  // 步骤
  const stepTitle = ['授权服务商后台', '侧边栏配置', '设置权限及可见范围']
  const active = ref<number>(0)
  let configSuccessVisible = ref<boolean>(false)
  const handleChangePage = (type: string = 'next') => {
    let showSide: Element | null = document.querySelector('main.el-main')
    showSide?.scrollTo({ top: 0 })
    type === 'next' ? active.value++ : active.value--
    showSide = null
  }

  const toHome = () => {
    router.push('/appmarket/myapp')
  }

  const toAuthConfig = () => {
    router.push('/appmarket/myapp')
  }

  onBeforeMount(() => {
    handleGetCustomizedtAppQrcode()
  })
  // 获取二维码
  const handleGetCustomizedtAppQrcode = async () => {
    const data = await getCustomizedtAppQrcode()
    configMessage[0][0].content = [data.qrcode]
  }
</script>

<style lang="scss">
  .enterprise_modal .el-dialog__body {
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
  }

  .authorization_config {
    padding: 20px;
    margin: 20px;
    background-color: #ffffff;
    .steps {
      display: flex;
      justify-content: center;
      .step_line {
        position: relative;
        width: 300px;
        height: 30px;
        line-height: 30px;
        margin-right: 30px;
        color: #333333;
        font-weight: 600;
        &:not(.step_line:last-child)::after {
          content: '';
          width: 180px;
          top: 50%;
          position: absolute;
          border-top: 1px dashed #ffc69e;
        }
        &.success {
          color: #ff6b00;
          .step_line_icon i {
            background-color: #ff6b00;
            color: #ffffff;
          }
        }
        .step_line_icon {
          margin: 0 10px;
          i {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #eaeaea;
            display: inline-block;
            text-align: center;
          }
          img {
            vertical-align: middle;
          }
        }
      }
    }
    .authorization_config_detail {
      margin-top: 70px;
      color: #33302d;
      .detail_card {
        margin-bottom: 40px;
      }
      .detail_title {
        padding: 10px 0;
        font-size: 20px;
        font-weight: 600;
        background-color: #fffaf9;
        i {
          display: inline-block;
          margin-left: 20px;
          margin-right: 16px;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          vertical-align: middle;
          background-color: #ff6b00;
        }
      }
      .detail_desc {
        padding: 10px 0;
        padding-left: 38px;
        font-size: 16px;
        p {
          height: 38px;
        }
      }
      .detail_content {
        // margin-top: 20px;
        // 后续删除
        min-height: 334px;
        text-align: center;
        font-size: 56px;
        background: #fbfbfb;
      }
    }
    .enterprise_modal {
      .config_content {
        display: flex;
        align-items: center;
        // justify-content: space-around;
        img {
          width: 160px;
        }
        > div {
          font-size: 14px;
          h4 {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 16px;
          }
        }
      }
    }
    .footer_buttons {
      text-align: right;
    }
  }
</style>
